<template>
  <!-- 外部数据页面 -->
  <div
    class="fileUplist"
    v-loading="uploading"
    element-loading-text="文件上传中. . ."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.5)"
  >
    <div class="btn-continer">
      <el-button
        type="primary"
        slot="reference"
        class="btn-lanse"
        @click="uploadFn()"
        ><i class="el-icon-plus el-icon--left">解析</i></el-button
      >
      <el-button type="success" class="btn-lvse" @click="submitAL"
        ><i class="el-icon-upload el-icon--left"> 提交</i></el-button
      >
      <el-button type="danger" class="btn-hongse" @click="delFn"
        ><i class="el-icon-delete el-icon--left"> 删除</i></el-button
      >
      <div class="btn-right">
        <el-button
          icon="el-icon-refresh-right"
          @click="refresh()"
          circle
        ></el-button>
        <el-button @click="goBank"
          ><i class="el-icon-back el-icon--left"> 返回</i></el-button
        >
      </div>
    </div>

    <div class="table-continer">
      <el-table
        :data="tableData"
        v-loading="loading"
        @selection-change="selectionchange"
        :highlight-current-row="true"
        :header-cell-style="{ background: '#F0F0F6', color: '#2D3548' }"
        style="width: 100%"
      >
        <el-table-column type="selection" width="50"> </el-table-column>
        <el-table-column fixed prop="fileName" label="文件名称">
        </el-table-column>
        <el-table-column prop="fileType" label="文件类型">
          <template slot-scope="scope">
            <span v-if="scope.row.fileType == 1">图片</span>
            <span v-if="scope.row.fileType == 2">视频</span>
            <span v-if="scope.row.fileType == 3">文档</span>
            <span v-if="scope.row.fileType == 4">音频</span>
          </template>
        </el-table-column>
        <el-table-column prop="fileSize" label="大小"> </el-table-column>
        <el-table-column prop="fileTime" label="上传时间"> </el-table-column>

        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 0">待提交</span>
            <span v-if="scope.row.state == 1">待审核</span>
            <span v-if="scope.row.state == 3">退回</span>
            <span v-if="scope.row.state == 2">审核通过</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="seeClick(scope.row)" type="text" size="small"
              ><i class="el-icon-edit el-icon--left"> 查看 </i></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="Pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
      >
      </el-pagination>
    </div>
    <el-dialog title="解析" :visible.sync="dialogFormVisible">
      <div class="markup">
        <el-table
          :data="rankThree"
          border
          max-height="300px"
          :highlight-current-row="true"
          :header-cell-style="{ background: '#F0F0F6', color: '#2D3548' }"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
          row-key="id"
          :key="key"
          style="width: 100%"
          @row-click="selectionClick"
          lazy
          :load="getChildrens"
          ref="multipleTable"
        >
          <el-table-column fixed label="名称">
            <template slot-scope="scope">
              <span style="height: 16px; display: inline-block">
                <img
                  v-show="!scope.row.fileType"
                  src="../assets/bao.png"
                  alt=""
                  style="margin-top: 3px; display: block"
                />
                <i
                  v-show="scope.row.fileType"
                  class="el-icon-document"
                  style="font-size: 18px; color: #3386fe"
                ></i>
              </span>
              {{ scope.row.name ? scope.row.name : scope.row.fileName }}
            </template>
          </el-table-column>
        </el-table>
        <div class="Pagination">
          <el-pagination
            @size-change="handleSizeChanges"
            @current-change="handleCurrentChanges"
            background
            :current-page="pageNums"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSizes"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totals"
          >
          </el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumit">确 定</el-button>
      </div>
    </el-dialog>
    <confim :dialogVisible="dialogVisible" @submitFn="submitFn" />
  </div>
</template>

<script>
import confim from "../components/confim.vue";

export default {
  name: "fileUplist",
  components: { confim },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalSize: 0,
      accept: "",
      showViewer: false,
      imgList: [],
      tableData: [],
      fileType: null, //文件类型
      selectId: [],
      loading: false,
      fileList: [],
      uploading: false,
      pageNums: 1,
      pageSizes: 10,
      rankThree: [],
      totals: 0,
      dialogFormVisible: false,
      key: "",
      row: "",
      tableAllData: [],
      dialogVisible: false,
      allScreenLoading: {},
    };
  },
  mounted() {
    this.$nextTick((res) => {});
    this.getList();
  },
  methods: {
    submitAL() {
      // let arr = [];
      // this.selectId.forEach((res) => {
      //   arr.push(res.id);
      // });
      if (this.selectId.length == 0) {
        this.$message({
          showClose: true,
          message: "请选择一条数据进行提交",
          type: "warning",
        });
        return;
      }
      this.$api.ContentSave(this.selectId).then((res) => {
        if (res.code == 200) {
          this.$message.closeAll();
          this.$message({
            showClose: true,
            message: "提交成功",
            type: "success",
          });
          this.currentPage = 1;
          this.getList();
        }
      });
    },
    delFn() {
      this.dialogVisible = true;
    },
    submitFn(flag) {
      if (flag) {
        if (this.selectId.length == 0) {
          this.$message({
            showClose: true,
            message: "请选择一条数据进行删除",
            type: "warning",
          });
          return;
        }
        this.allScreenLoading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        this.$api
          .ContentDelete(this.selectId)
          .then((res) => {
            if (res.code == 200) {
              this.loopDelEs();
            }
          })
          .catch((res) => {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          });
        this.dialogVisible = false;
      } else {
        this.dialogVisible = false;
      }
    },
    loopDelEs() {
      let promiseArr = this.selectId.map((item) => {
        return new Promise((resolve, reject) => {
          let params = {
            file_id: item.id,
          };
          this.$api
            .delete_file(params)
            .then((res) => {
              if (res.state == 200) {
                resolve();
              } else {
                reject();
              }
            })
            .catch(() => {
              reject();
            });
        });
      });
      Promise.all(promiseArr)
        .then(() => {
          this.$message.closeAll();
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success",
          });
          this.currentPage = 1;
          this.getList();
          this.allScreenLoading.close();
        })
        .catch(() => {
          this.allScreenLoading.close();
          this.$message({
            type: "error",
            message: "删除失败",
          });
        });
    },
    getCaption(obj) {
      const index = obj.lastIndexOf(".");
      const res = obj.substring(index, obj.length);
      return res;
    },
    sumit() {
      let asd = this.getCaption(this.row.filePath);
      if (asd != ".doc" && asd != ".pdf" && asd != ".docx") {
        this.$message({
          message: "只能解析.doc和.pdf和.docx文件",
          type: "warning",
        });
        return;
      }
      let obj = {};
      let apiName = "";
      if (asd == ".doc" || asd == ".docx") {
        obj = {
          file_id: this.row.id,
          file_type: this.$route.query.id,
          file_path: CONFIG.url + "/collect" + this.row.filePath,
        };
        apiName = "save_word";
      } else if (asd == ".pdf") {
        obj = {
          file_id: this.row.id,
          file_path: CONFIG.url + "/collect" + this.row.filePath,
        };
        apiName = "save_pdf";
      }

      this.$api
        .ContentuploadInfo(this.$route.query.id, this.row)
        .then((res) => {
          if (res.code == 200) {
            this.getList();
            this.$api[apiName](obj)
              .then((res) => {
                this.dialogFormVisible = false;
                if (res.state == 200) {
                  this.getTagList();
                  this.getList();
                  this.$message({
                    message: res.msg,
                    type: "success",
                  });
                } else {
                  this.$message({
                    message: res.msg,
                    type: "error",
                  });
                }
              })
              .catch((res) => {
                this.dialogFormVisible = false;
                this.$message({
                  message: res.msg,
                  type: "error",
                });
              });
          } else {
            this.dialogFormVisible = false;
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((res) => {
          this.$message({
            message: res.msg,
            type: "error",
          });
        });
    },
    getChildrens(tree, treeNode, resolve) {
      let obj = {
        parentId: tree.id,
        pageNum: this.pageNums,
        pageSize: this.pageSizes,
        name: tree.name,
      };
      this.$api.ContentSelectList(obj).then((res) => {
        let data;
        if (Array.isArray([res.data])) {
          if (res.data.length == 0) {
            tree.hasChildren = false;
            this.$set(this.rankThree, tree.id.toString() + "asd", "");
            return;
          }
        }
        if (res.data && res.data.list.length > 0) {
          data = res.data.list.map((item, index) => {
            return {
              ...item,
              hasChildren: true,
              children: [],
            };
          });
          this.tableAllData = this.tableAllData.concat(data); // 保存表格数据
          resolve(data);
        } else {
          tree.hasChildren = false;
          this.$set(this.rankThree, tree.id.toString() + "asd", "");
        }
      });
    },
    getList() {
      this.loading = true;
      let obj = {
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        fileCategory: this.$route.query.id,
      };
      this.$api
        .ContentList(obj)
        .then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.tableData = res.data.content;
            this.totalSize = res.data.totalSize;
          } else {
            this.tableData = [];
            this.totalSize = 0;
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.tableData = [];
          this.totalSize = 0;
        });
    },
    seeClick(row) {
      let asd = this.getCaption(row.filePath);
      this.$router.push({
        path: "/fielDetail",
        query: { row: row.id, type: asd },
      });
    },
    selectionchange(row) {
      this.selectId = row;
    },
    refresh() {
      this.currentPage = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getList();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
      // console.log(`当前页: ${val}`);
    },
    //文件上传
    uploadFn() {
      this.rankThree = [];
      this.dialogFormVisible = true;
      this.pageNums = 1;
      this.getTagList();
    },
    getTagList() {
      let obj = {
        parentId: 0,
        pageNum: this.pageNums,
        pageSize: this.pageSizes,
        name: "",
      };
      this.$api
        .ContentSelectList(obj)
        .then((res) => {
          this.rankThree = res.data.list;
          this.rankThree.forEach((res) => {
            res.hasChildren = true;
          });
          this.totals = res.data.total;
          this.key = Math.random();
        })
        .catch(() => {});
    },
    selectionClick(row) {
      this.row = row;
    },
    handleSizeChanges(val) {
      this.pageSizes = val;
      this.getTagList();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChanges(val) {
      this.pageNums = val;
      this.getTagList();
      // console.log(`当前页: ${val}`);
    },
    goBank() {
      this.$router.go(-1);
    },
  },
};
</script>
<style>
._progress ._time-current,
._progress ._time-amount {
  width: 80px;
}
</style>
<style scoped lang="scss">
@import "@/css/mixin.scss";
@import "@/css/flex.scss";
.fileUplist {
  padding: 0 30px;
  overflow: hidden;

  .content {
    height: 520px;
  }
  .pright {
    margin-right: 10px;
  }
  .btn-continer {
    margin-top: 30px;
    margin-bottom: 20px;
    .btn-right {
      float: right;
    }
  }
  .Pagination {
    text-align: right;
    margin-top: 40px;
  }
  .markup {
    // width:95%;
    padding: 38px;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    p {
      @include sc(19px, #3386fe);
    }
    .tag {
      margin: 20px 0 50px 0;
    }
    .el-tag {
      margin-right: 20px;
      font-size: 18px;
      line-height: 25px;
      img {
        @include wh(20px, 20px);
        vertical-align: middle;
        display: inline-block;
      }
      span {
        vertical-align: middle;
        display: inline-block;
        margin-left: 5px;
      }
    }
    .color0 {
      color: #2285e2;
      background-color: #eff5ff;
      border-color: #eff5ff;
    }
    .color1 {
      color: #00d815;
      background-color: #ebfcec;
      border-color: #ebfcec;
    }
    .color2 {
      color: #ff8f2c;
      background-color: #fff6ee;
      border-color: #fff6ee;
    }
    .color3 {
      color: #2285e2;
      background-color: #eff5ff;
      border-color: #eff5ff;
    }
    .color4 {
      color: #fc4242;
      background-color: #fff0f0;
      border-color: #fff0f0;
    }
    .color5 {
      color: #fc4242;
      background-color: #fff0f0;
      border-color: #fff0f0;
    }
    .color6 {
      color: #fc4242;
      background-color: #fff0f0;
      border-color: #fff0f0;
    }
    .color7 {
      color: #fc4242;
      background-color: #fff0f0;
      border-color: #fff0f0;
    }
    .classify {
      margin-top: 30px;
      align-items: baseline;
      .label {
        @include sc(18px, #515c68);
        font-weight: bold;
        margin-right: 7px;
      }

      .tab-list {
        width: calc(100% - 100px);
        cursor: pointer;
        span {
          padding: 10px 20px;
          background: #f0f0f6;
          border-radius: 5px;
          margin: 0 10px 15px 0;
        }
        .chosed {
          color: #3386fe;
          background-color: #eff5ff;
        }
      }
      .tab-detail {
        width: calc(100% - 100px);
        min-height: 130px;
        background-color: #f3f3f7;
        padding: 18px 22px;
        border-radius: 5px;
        overflow-y: scroll;
        /deep/.el-checkbox__inner {
          border-radius: 50%;
          background-color: #a8a8a8;
        }
        /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
          // color:#6c7c92;
        }
        /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
          // background-color: #6c7c92;
          // border-color:#6c7c92;
          background-color: #409eff;
        }
      }
    }
    .classify2 {
      margin-top: 10px;
      .tab-list {
        span {
        }
      }
    }
    .classify3 {
      align-items: flex-start;
    }
  }
}
</style>
